@import '../../scss/mixin';
@import '../../scss/variable';

.addcart {
    @include wh(100%, 100%);
    background: #f7f7f8;
    @include flex(column);

    .content {
        flex: 1;
        width: 100%;
        overflow: auto;

        .frame {
            min-height: 200px;
            img{
                @include wh(100%, 700px);
            }
        }

        .merit {
            @include wh(100%, 80px);
            @include flex(row, center, center);

            span {
                flex: 1;
                font-size: $base-size-s;
                text-align: center;

                b {
                    color: red;
                }
            }
        }

        .goods {
            background: #fff;
            text-align: center;
            padding: 40px 0 0;

            h2 {
                font-size: $base-size-xll;
                margin-bottom: 20px;
            }

            p {
                color: #000;

                &:nth-child(3) {
                    @include middle(100px);
                    font-size: $base-size-xll;
                    color: red;
                }
            }

            .add {
                @include middle(100px);
                padding: 0 20px;
                text-align: right;
                @include border1px(top);
                i {
                    font-size: .3rem;
                    color: #000;
                }
                b {
                    color: red;
                }
            }
        }

        .comment {
            margin-top: 20px;
            padding: 0 40px;
            height: 100px;
            line-height: 100px;
            background: #fff;
            overflow: hidden;
            text-align: right;

            span {
                color: #000;
                &:nth-child(1) {
                    float: left;
                }
            }
            i {
                font-size: .3rem;
                color: #000;
            }
        }

        .title {
            text-align: center;
            color: #2196f3;
            background: #fff;
            padding: 40px 0;
            margin: 20px 0 0;
        }
        .params{
            padding: 20px 40px;
            background: #fff;
            p{
                @include wh(100%, 80px);
                line-height: 80px;
                margin-top: 10px;
                background: #dcdfe6;
                @include flex(row, flex-start, center);
                span{
                    padding: 0 10px;
                    &:nth-child(1) {
                        flex: 2.5;
                        text-align: right;
                    }
                    &:nth-child(2) {
                        flex: 7.5;
                        color: #000;
                        @include ellipsis()
                    }
                }
            }
        }
            .wrapItem{
                padding: 20px;    
                background: #fff;
                .wrapItemTitle{
                    @include wh(100%, 80px);
                    display: flex;
                    span{
                        font-size: .28rem;
                        height: 100%;
                        line-height: 80px;
                        &:nth-child(1) {
                            flex: 6;
                            color: #000;
                        }
                        &:nth-child(2) {
                            flex: 4;
                            @include ellipsis();
                            color: gray;
                        }
                    }
                }
                .wrapItemContent{
                    line-height: 60px;
                    color: gray;
                }
               .wrapItemImg{
                    img{
                        @include wh(100px*2, 100px*2);
                        margin-right: 10px;
                    }
               }
        }
        .img{
            padding: 20px 0;
        }
        .questionItem {
            padding: 20px 40px;
            background: #fff;

            h3 {
                color: #000;
                line-height: 60px;
                font-size: $base-size-xl;

                b {
                    color: red;
                }
            }

            p {
                line-height: 40px;
            }
        }

    }

    .footer {
        @include wh(100%, 100px);
        @include flex(row, center, center);
        background: #fff;
        box-shadow: rgba($color: #000000, $alpha: 0.5) 0 -2px 15px 0;
        z-index: 1;

        div {
            flex: 1;
            text-align: center;
            color: gray;
            height: 100%;
            line-height: 100px;
            &:nth-child(1) {
                flex: 2;
                i {
                    font-size: .6rem;
                    color: gray;
                    z-index: 998;
                }
            }

            &:nth-child(2) {
                flex: 2;
                position: relative;
                i {
                    font-size: .6rem;
                    color: #2196f3;
                }
                .number{
                    font-size: .32rem;
                    color: red;
                    font-weight: bolder;
                    position: absolute;
                    top: -24px;
                    right: 14px;
                }
            }

            &:nth-child(3) {
                flex: 3;
            }

            &:nth-child(4) {
                flex: 3;
                button {
                    background: linear-gradient(90deg, #1d62f0, #19d5fd);
                }
            }
            button {
                @include wh(100%, 100%);
                background: linear-gradient(90deg, #ff9500, #ff5e3a);
                border: none;
                font-size: .3rem;
                color: #fff;
            }
        }
    }
   .dialog{
       @include wh(100%,100%);
       position: fixed;
       left: 0;
       top: 0;
       right: 0;
       bottom: 0;
       z-index: 998;
    
   }
   .mask{
        @include wh(100%,100%);
        background: rgba($color: #000000, $alpha: .5);
   }
   .tip{
       width: 100%;
       min-height: 35%;
       position: absolute;
       left: 0;
       bottom: 0;   
       background: #fff;   
       padding-top: 40px;
   }
   .close{
       position: absolute;
       top: 50px;
       right: 30px;
       @include wh(32px,32px);
       border: 2px solid red;
       color: red;
       line-height: 20px;
       text-align: center;
       border-bottom: 4px solid red;
   }
   .maskTitle{
        @include wh(100%,240px);
        @include flex(row,center,center);
        padding: 0 20px;
   }
   .maskLeft{
        flex: 3;
        height: 100%;
        line-height: 240px;
        img{
            @include wh(210px,210px);
        }
   }
   .maskRight{
       flex: 7;
       height: 100%;
       @include flex(column,center,flex-start);
       padding: 0 40px;
       p{
           label{
               display: inline-block;
                @include wh(150px,60px);
                text-align: left;
                line-height: 60px;
                color: gray;
           }
           b{
               color: red;
           }
       }
   }
  
   .maskMsg{
        @include wh(100%,60px);
        line-height: 60px;
        font-weight: 800;
        padding: 0 20px;
        color: #000;
   }
   .maskHandle{
       @include wh(100%,80px);
       margin-bottom: 20px;
       padding: 0 20px;
        span{
            display: inline-block;
            @include wh(120px,80px);
            text-align: center;
            line-height: 70px;
            border: .5px solid #ddd;
            font-size: .36rem;
            color: #000;
            font-weight: bold;
            &:nth-child(2){
                width: 160px;
            }
        }
   }
   .maskFooter{
        @include wh(100%, 100px);
        button {
            @include wh(50%, 100%);
            background: linear-gradient(90deg, #ff9500, #ff5e3a);
            border: none;
            font-size: .3rem;
            color: #fff;
            &:nth-child(2) {
                background: linear-gradient(90deg, #1d62f0, #19d5fd);
            }
        }
   }
}